<template>
  <div id="w-table-filter" class="w-table-filter">
    <div class="w-table-filter-l" flex-row-lt>
      <el-form
        ref="form"
        class="w-table-filter-form"
        :inline="true"
        label-position="left"
        label-width="75px"
        :show-message="false"
      >
        <el-form-item label="日期区间">
          <el-date-picker
            v-model="dateValue"
            end-placeholder="结束日期"
            start-placeholder="开始日期"
            style="width: 260px"
            type="daterange"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="用户:">
          <el-input
            v-model="filterData.keyword"
            class="w-table-filter-form-input"
            placeholder="请输入用户名/手机号/身份证号"
            size="mini"
            style="width: 300px"
          />
        </el-form-item>

        <el-form-item label="用户角色:">
          <el-select
            v-model="filterData.role"
            placeholder="选择用户角色"
            size="mini"
          >
            <el-option
              v-for="item in roleDic"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="用户类型:">
          <el-select
            v-model="filterData.type"
            placeholder="选择用户类型"
            size="mini"
          >
            <el-option
              v-for="item in typeDic"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="w-table-filter-form-btn">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="save"
        >
          查询
        </el-button>

        <el-button
          icon="el-icon-refresh"
          size="mini"
          type="info"
          @click="clear"
        >
          重置
        </el-button>
      </div>
    </div>

    <div class="w-table-filter-r">
      <el-button
        icon="el-icon-plus"
        size="mini"
        type="primary"
        @click="$emit('add')"
      >
        添加
      </el-button>

      <el-button icon="el-icon-download" size="mini" type="" @click="download">
        导出
      </el-button>

      <el-button
        icon="el-icon-download"
        size="mini"
        type="danger"
        @click="$emit('delAll')"
      >
        批量删除
      </el-button>
    </div>
  </div>
</template>

<script>
  import $api from './api'
  import { extend } from '@/utils/tool.js'

  export default {
    // 组件
    components: {},
    emits: ['save', 'add', 'delAll', 'change'],
    data() {
      return {
        def: {},
        filterData: {
          keyword: '',
          role: '',
          type: '',
          startDate: '',
          endDate: '',
        },

        roleDic: [],
        typeDic: [],
      }
    },

    // 计算属性
    computed: {
      dateValue: {
        get() {
          return [this.filterData.startDate, this.filterData.endDate]
        },

        set(newVal) {
          if (!newVal) {
            this.filterData.startDate = null
            this.filterData.endDate = null
            return
          }
          this.filterData.startDate = newVal[0]
          this.filterData.endDate = newVal[1]
        },
      },
    },

    // 侦听属性
    watch: {
      value: {
        // 在创建侦听器时，立即执行一遍回调。
        immediate: true,

        // 深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大
        deep: true,
        handler: function (newVal, oldVal) {
          console.log('newVal', newVal)
          this.errorMsg = ''
          if (newVal.length < 1 && this.disabled !== true) {
            this.form.list = []
            this.addRow()
            return
          }
          this.form.list = newVal
        },
      },
    },

    created() {
      this.def = extend(this.filterData)
    },

    mounted() {
      this.initDic()
    },

    methods: {
      save() {
        const d = { ...this.filterData }
        this.$emit('change', d)
      },

      clear() {
        this.filterData = this.$tool.extend(this.def)
        this.$emit('change', this.filterData)
      },

      // 加载字典
      initDic() {
        $api
          .roleDic()
          .then((res) => {
            this.roleDic = res.data
          })
          .catch((error) => {
            console.log('roleDic 字典加载失败', error)
          })

        $api
          .typeDic()
          .then((res) => {
            this.typeDic = res.data
          })
          .catch((error) => {
            console.log('typeDic 字典加载失败', error)
          })
      },

      download() {
        const sendData = { ...this.filterData }
        const url = $api.download(sendData)
        window.open(url)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
